<template>
    <section class="event_data">
        <aside class="aside">
            <div style="font-size:14px;color:rgba(51,51,51,1);margin:20px">文件下载</div>
            <p v-for="(item,index) in FileList" :key="index">{{ item ? (index+1) + "." +item.data_name : "" }}&nbsp;&nbsp;{{ item ? item.size + "KB": "" }}
                <Icon v-if="item" @click="downLoadFile(item.data_id,item.data_name)" class='icon' type="md-download" size="20" />
            </p>
        </aside>
        <article class="article">
             <figure style="font-size:16px" v-for="(value,key,index) in eventData" :key="index">
                <figcaption style="font-size:16px" v-if="value">{{ key | toChiinese }}</figcaption>
                <p style="text-indent:24px;font-size:12px;margin:20px 0;" v-if="value" v-html="value"></p>
            </figure>
        </article>
    </section>
</template>
<script>
import { mapActions } from 'vuex';
export default {
    name:"eventData",
    props:['id'],
    filters:{
        toChiinese(val){
            if(val === 'topic'){
                return '竞赛题目'
            }else if(val === 'data'){
                return '竞赛数据'
            }else if(val === 'evaluation'){
                return '评估指标'
            }else if(val === 'precautions'){
                return '注意事项'
            }
        }
    },
    data(){
        return{
            eventData:{},
            FileList:[],
            downLoadDataUrl:null,
        }
    },
    methods:{
        ...mapActions(['XgetCompetitionTopic','XgetCompetitionDataList','XdownLoadCmpData']),
        async downLoadFile(id,Filename){
            try{
                await this.XdownLoadCmpData(id,name).then(res => {
                  this.$Message.info({
                    content:"正在下载",
                    duration:2
                  })
                  this.downLoadDataUrl = res.data
              })
            }catch(e){
            }
            let link = document.createElement('a');
            link.style.display = 'none';
            link.href = this.downLoadDataUrl;
            link.download = Filename;
            link.click();
            window.URL.revokeObjectURL(link.href);
        }
    },
    mounted(){
        this.XgetCompetitionTopic(this.id).then(res => {this.eventData = res.data})
        this.XgetCompetitionDataList(this.id).then(val => {this.FileList = val.data})
    }
}
</script>
<style lang="scss" scoped>
    .event_data{
        width: 1200px;
        margin: 0 auto 43px;
        border:1px solid #f7f7f7;
        display: flex;
        .aside{
            width:200px;
            p{
                text-align: left;
                margin: 20px;
                font-size:12px;
                color:rgba(102,102,102,1);
            }
        }
        .article{
            width:1000px;
            border-left: 1px solid #f7f7f7;
            padding:40px;
        }
    }
</style>
